<template>
  <Card title="条件映射" :head-style="{ textAlign: 'center', fontWeight: 'bold' }">
    <Table :data-source="list" :columns="columns" :pagination="false" :showHeader="false">
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.dataIndex == 'sourceCondField'">
          <Select
            style="width: 160px"
            :options="formGetFieldsData"
            v-model:value="record[column.dataIndex]"
            :field-names="{ label: 'title', value: 'name' }"
            :disabled="index != 0"
            show-search
            optionFilterProp="title"
            @change="setName($event, record, 'sourceCondFieldNames', formGetFieldsData)"
          />
        </template>
        <template v-if="column.dataIndex == 'fieldOpener'">
          <Select
            style="width: 160px"
            :options="formGetFieldsDataTo"
            v-model:value="record[column.dataIndex]"
            :field-names="{ label: 'title', value: 'name' }"
            :disabled="index != 0"
            show-search
            optionFilterProp="title"
            @change="setName($event, record, 'fieldOpenerNames', formGetFieldsDataTo)"
          />
        </template>
        <template v-if="column.dataIndex == 'cz'">
          <a-button v-if="index == 0" @click="handleCreate(record)">添加</a-button>
          <a-button v-else @click="handleDelete(index)">删除</a-button>
        </template>
      </template>
    </Table>
  </Card>
</template>
<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { Card, Table, Select, message } from 'ant-design-vue';
  const emit = defineEmits(['update:modelValue']);
  const props = defineProps({
    formGetFieldsData: {
      type: Array,
      default: () => [],
    },
    formGetFieldsDataTo: {
      type: Array,
      default: () => [],
    },
    modelValue: {
      type: Array,
      default: () => [],
    },
  });

  const columns = [
    {
      dataIndex: 'sourceCondFieldName',
      title: '查询中的条件',
      align: 'center',
    },
    {
      dataIndex: 'sourceCondField',
      title: '来源',
      align: 'center',
    },
    {
      dataIndex: 'fieldOpenerName',
      title: '主表中的条件',
      align: 'center',
    },
    {
      dataIndex: 'fieldOpener',
      title: '目标',
      align: 'center',
    },
    {
      dataIndex: 'cz',
      title: '操作',
      align: 'center',
    },
  ];
  const obj = {
    sourceCondFieldName: '查询中的条件',
    sourceCondField: '',
    sourceCondFieldNames: '',
    fieldOpenerName: '主表中的条件',
    fieldOpener: '',
    fieldOpenerNames: '',
    type: 'add',
  };
  const list = ref([{}]);

  watch(
    () => props.modelValue,
    (newVal) => {
      list.value = newVal as Recordable[];
    },
    {
      immediate: true,
    },
  );
  const handleCreate = (record) => {
    if (!record.sourceCondField) {
      message.warning('查询中的条件不能为空');
      return;
    }
    if (!record.fieldOpener) {
      message.warning('主表中的条件不能为空');
      return;
    }
    const newObj = { ...obj };
    list.value.unshift(newObj);
    setEimt();
  };

  const handleDelete = (index) => {
    list.value.splice(index, 1);
  };

  const setEimt = () => {
    emit('update:modelValue', list.value);
  };
  const setName = (val, record, col, data) => {
    if (!val) return;
    record[col] = data.find((item) => item.name == val)?.title;
  };
  const handleInit = () => {
    list.value = [{ ...obj }];
    setEimt();
  };

  defineExpose({
    handleInit,
  });
</script>
